﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1 id="head1"></h1>
    <div>
        <select id="formatType">
            <option value="json">json</option>
            <option value="line">line</option>
        </select>

        <input type="button" id="connect" value="Connect" />
        <input type="button" id="disconnect" value="Disconnect" />
    </div>


    <h4>To Everybody</h4>
    <form class="form-inline">
        <div class="input-append">
            <input type="text" id="message-text" placeholder="Type a message, name or group" />
            <input type="button" id="broadcast" class="btn" value="Broadcast" />
            <input type="button" id="broadcast-exceptme" class="btn" value="Broadcast (All Except Me)" />
            <input type="button" id="join" class="btn" value="Enter Name" />
            <input type="button" id="join-group" class="btn" value="Join Group" />
            <input type="button" id="leave-group" class="btn" value="Leave Group" />
        </div>
    </form>

    <h4>To Me</h4>
    <form class="form-inline">
        <div class="input-append">
            <input type="text" id="me-message-text" placeholder="Type a message" />
            <input type="button" id="send" class="btn" value="Send to me" />
        </div>
    </form>

    <h4>Private Message</h4>
    <form class="form-inline">
        <div class="input-prepend input-append">
            <input type="text" name="private-message" id="private-message-text" placeholder="Type a message" />
            <input type="text" name="user" id="target" placeholder="Type a group name" />
            <input type="button" id="groupmsg" class="btn" value="Send to group" />
        </div>
    </form>

    <ul id="message-list"></ul>
</body>
</html>
<script type="text/javascript">
    if (typeof Promise === 'undefined')
    {
        document.write(
            '<script type="text/javascript" src="lib/signalr-client/signalr-clientES5.js"><\/script>' +
            '<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocolES5.js"><\/script>');
    }
    else
    {
        document.write(
            '<script type="text/javascript" src="lib/signalr-client/signalr-client.js"><\/script>' +
            '<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocol.js"><\/script>');
    }
</script>
<script src="utils.js"></script>
<script>
var isConnected = false;
function invoke(connection, method) {
    if (!isConnected) {
        return;
    }
    var argsArray = Array.prototype.slice.call(arguments);
    connection.invoke.apply(connection, argsArray.slice(1))
            .then(function(result) {
                console.log("invocation completed successfully: " + (result === null ? '(null)' : result));

                if (result) {
                    addLine('message-list', result);
                }
            })
            .catch(function(err) {
                addLine('message-list', err, 'red');
            });
}

function getText(id) {
    return document.getElementById(id).value;
}

let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;
let logger = new signalR.ConsoleLogger(signalR.LogLevel.Information);
let hubRoute = getParameterByName('hubType') || "orders";
console.log('Hub Route:' + hubRoute);

document.getElementById('head1').innerHTML = signalR.TransportType[transportType];

let connectButton = document.getElementById('connect');
let disconnectButton = document.getElementById('disconnect');
disconnectButton.disabled = true;
var connection;

click('connect', function(event) {
    connectButton.disabled = true;
    disconnectButton.disabled = false;
    console.log('http://' + document.location.host + '/' + hubRoute);
    connection = new signalR.HubConnection(hubRoute, logger, { transport: transportType, logger: logger });
    connection.on('Send', function(msg) {
        addLine('message-list', msg);
    });

    connection.onclose(function(e) {
        if (e) {
            addLine('message-list', 'Connection closed with error: ' + e, 'red');
        }
        else {
            addLine('message-list', 'Disconnected', 'green');
        }
    });

    connection.start()
        .then(function() {
            isConnected = true;
            addLine('message-list', 'Connected successfully', 'green');
        })
        .catch(function(err) {
            addLine('message-list', err, 'red');
        });
});

click('disconnect', function(event) {
    connectButton.disabled = false;
    disconnectButton.disabled = true;
    connection.stop()
        .then(function() {
            isConnected = false;
        });
});

click('broadcast', function(event) {
    let data = getText('message-text');
    invoke(connection, 'Send', data);
});

click('join-group', function(event) {
    let groupName = getText('message-text');
    invoke(connection, 'JoinGroup', groupName);
});

click('leave-group', function(event) {
    let groupName = getText('message-text');
    invoke(connection, 'LeaveGroup', groupName);
});

click('groupmsg', function(event) {
    let groupName = getText('target');
    let message = getText('private-message-text');
    invoke(connection, 'SendToGroup', groupName, message);
});

click('send', function(event) {
    let data = getText('me-message-text');
    invoke(connection, 'Echo', data);
});

</script>
